<template>
  <!-- 产品分类导航 -->
  <view class="wrap" v-if="content">
    <!-- 导航栏 -->
    <shopro-navbar :isBack="true">
      <view class="u-flex-1 u-flex  u-row-center u-col-center" slot="content">
        <view style="font-weight:bold">{{ title }}</view>
      </view>
    </shopro-navbar>
    <view class="menu-category-box u-m-b-20">
      <view class="menu-tab-box u-flex u-flex-wrap">
        <view
            class="tab-list u-flex-col u-col-center u-row-center"
            :style="{ width: 100 / 5 + '%' }"
            v-for="(item, indexs) in  content"
            :key="item.store_cate_id"
            @click="toPath(item)"
        >
          <image class="tab-img" :src="item.image"></image>
          <text class="">{{ item.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * shGridSwiper-滑动宫格列表
 * @property {Array} list - 列表数据
 * @property {Number|String} oneRowNum - 单行数量
 */
export default {
  components: {},
  data() {
    return {
      categoryCurrent: 0 ,//分类轮播下标
      content: [],
      title:'',
      isVip:0,
      id:''
    };
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    oneRowNum: {
      type: [Number, String],
      default: 5
    }
  },
  computed: {
    // newList() {
    //   if (this.list.length) {
    //     let data = this.$tools.splitData(this.list, this.oneRowNum * 2);
    //     return data;
    //   }
    // }
  },
  onLoad(option){
    this.getVip()
    this.id = option.id
	  this.type=option.type
    if(this.id ==1){
      this.title='吃喝玩乐'
    } else if(this.id ==3){
      this.title='多米教育'
    } else if(this.id ==4){
      this.title='健康保健'
    }
    this.getServive()
  },
  created(){
  },
  methods: {
    // 获取分类服务
    async getServive() {
      this.$https('category.serveListOnes', {
        type_id: this.id
      }).then(res => {
        if (res.code === 1) {
          this.content = res.data
        }
      })
    },
    getVip() {
      this.$https('user.isVip').then(res => {
        if (res.code === 1) {
          this.isVip = res.data;
        }
      })
    },
	  toPath(item){
      if(this.id == '4'){
      }else{
        this.$Router.push('/pages/index/food?store_cate_id=' + item.store_cate_id + "&title=" + item.name)
      }
	  },
    jump(path, query) {
      this.$Router.push({
        path: path,
        query: query
      });
    }
  }
};
</script>

<style lang="scss">
page{
		  background:#ffffff;
}
.wrap{
  height: 100%;
}
// 产品分类
.menu-category-box{
  position: relative;
  background: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
  padding-top: 20rpx;
.titles{
font-size: 32rpx;
font-weight: 600;
margin-left: 18rpx;
}
.menu-tab-box {
.tab-list {
font-size: 26rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
margin: 20rpx 0;
.tab-img {
 width: 72rpx;
 height: 72rpx;
  margin-bottom: 10rpx;
}
}
}

.menu-category-dots {
display: flex;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10rpx;

.category-dot {
width: 12rpx;
height: 12rpx;
background: #eeeeee;
border-radius: 50%;
margin-right: 10rpx;
}

.category-dot-active {
width: 12rpx;
height: 12rpx;
background: #e9b461;
border-radius: 50%;
margin-right: 10rpx;
}
}
}
</style>
